<template>
  <view class="main">
    <!--服务页面  -->
    <!-- 头部家人部分 -->
    <view class="family">
      <view class="family-bg-red"></view>
      <view class="family-content">
        <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="familyScrollLeft">
          <view class="f-inner">
            <view v-for="(item, index) in familyList" :key="index" class="f-item" @click="changePerson(index, 'click')">
              <view :class="['f-logo', index % 2 === 0 ? 'f-b-imgw-boy' : 'f-b-imgw-girl']">
                <image :src="item.src" :alt="item.insuredName" class="f-logo-img" />
                <!-- <img :src="membersStatus[item.status ? item.status : 0]" class="f-logo-img-icon" /> -->
              </view>
              <!-- <view class="f-name">{{ item.name }}</view> -->
              <view v-if="familyIndex === index" class="f-san"></view>
              <view v-if="familyIndex === index" class="f-w-line"></view>
            </view>
            <!-- <view class="f-add">
            <view class="f-a-btn" @click="helpFamilyJoin">
              <image :src="addPng" alt="添加家人" />
            </view>
          </view> -->
          </view>
        </scroll-view>
        <view class="p-user">
          <view class="p-u-logo">
            <image :src="personLogo" alt="" />
          </view>
          <view class="p-u-name">{{ patientInfo.name || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }}</view>
          <view class="p-u-line"></view>
          <view class="p-u-goods">万户健康社区</view>
        </view>
      </view>
    </view>
    <!-- 用户购买的所有服务单 -->
    <view class="order-wrap">
      <!-- loading 为false表示已经发过请求，确实没有数据 -->
      <view class="order">
        <view class="pkg">
          <view class="healthPannel">
            <!-- 呼叫视频医生 -->
            <view class="h-inner">
              <view v-if="pageType === 0" class="service-banner" @click="callVideo">
                <img :src="require('@/static/service/24v-d.png')" />
              </view>
              <!-- 视频医生7天免费试用 -->
              <view v-if="pageType === 1" class="service-banner service-banner7" @click="buyVideoDoctor(7)">
                <img
                  src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/images/v-7trial.png"
                />
              </view>
              <!-- 24小时视频医生 -->

              <view v-if="pageType === 2" class="service-banner service-banner24" @click="buyVideoDoctor(24)">
                <img
                  src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/images/1call.png"
                />
              </view>
            </view>

            <view class="radiosListWrap">
              <div v-if="loading" class="radio-loading">
                <img :src="bLoadingPng" alt="loading" />
              </div>
              <view class="radiosList" @click="goServiceList">
                <view class="icon"><img :src="sListPng" /></view>
                <view class="name">服务订单</view>
              </view>
              <view v-if="power" class="radiosList" @click="goIllForm">
                <view class="icon icon-red icon-expire">
                  <img :src="iconMoneyPng" />
                  <!-- <span v-if="isHealthExaminationBtnExpire" class="expire-txt">已过期</span> -->
                </view>
                <!-- <view :class="['name', isHealthExaminationBtnExpire ? 'name-expire' : '']">体检服务</view> -->
                <view :class="['name']">理赔服务</view>
              </view>
              <view v-if="showHealthExaminationBtn" class="radiosList" @click="physicalExamination">
                <view class="icon icon-red icon-expire">
                  <img :src="iconCheckPng" />
                  <!-- <span v-if="isHealthExaminationBtnExpire" class="expire-txt">已过期</span> -->
                </view>
                <!-- <view :class="['name', isHealthExaminationBtnExpire ? 'name-expire' : '']">体检服务</view> -->
                <view :class="['name']">体检服务</view>
              </view>

              <!-- 已过期，放最后 -->
              <view
                v-if="!isHealthAssessmentBtnExpire && showHealthAssessmentBtn && healthServer"
                class="radiosList bgOrigin"
                @click="startReportTalk"
              >
                <view class="icon icon-expire">
                  <img :src="healthAssIconPng" />
                </view>
                <view :class="['name']">健康评估</view>
              </view>

              <!-- <view v-if="showDrugHistoryBtn" class="radiosList" @click="startReportTalk">
                <view class="icon"><img :src="require('../../static/icon/yyjl.png')" /></view>
                <view class="name">用药记录</view>
              </view> -->

              <view class="radiosList" @click="goAskDoctorHistory">
                <view class="icon"><img :src="wzjlPng" /></view>
                <view class="name">咨询记录</view>
              </view>

              <view class="radiosList" @click="healthReport">
                <view class="icon">
                  <view v-if="isMark" class="mark"></view>
                  <img :src="assHiltoryPng" />
                </view>
                <view class="name">健康报告</view>
              </view>
              <view class="radiosList" @click="startHealthyPage">
                <view class="icon"><img :src="healthIconPng" /></view>
                <view class="name">健康档案</view>
              </view>

              <view v-if="familyIndex === 0" class="radiosList" @click="goFamilyMember">
                <view class="icon"><img :src="require('./../../static/icon/f-m-icon.png')" /></view>
                <view class="name">家庭成员</view>
              </view>

              <!-- 已过期的按钮放最后 -->

              <view v-if="isHealthAssessmentBtnExpire && showHealthAssessmentBtn" class="radiosList bgOrigin">
                <view class="icon icon-expire">
                  <img :src="healthAssIconPng" />
                  <span class="expire-txt">已过期</span>
                </view>
                <view :class="['name', 'name-expire']">健康评估</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="welfarePlanList.length > 0" class="service-ad">
        <view class="s-ad-title">推荐服务</view>
        <view class="s-ad-img">
          <swiper class="plan-swiper" autoplay :circular="true" :interval="2000">
            <swiper-item v-for="(item, index) in welfarePlanList" :key="index" @click="bugMoreService(item, index)">
              <view class="plan-img">
                <img :src="item.path" :alt="item.title" />
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!--
      <view v-if="!hasServices" class="pkg-tip-wrap">
        <view class="orderTitle">服务订单</view>
        <view class="pkg-tip">暂无服务</view>
      </view>
      <view v-if="inserviceOrderList.length" class="order-list-wrap">
        <view v-for="(order, index) in inserviceOrderList" :key="index" :class="['order', 'order' + index]">
          <view v-if="index === 0" class="orderTitle">服务订单</view>
          <view v-if="index === 0 || canSpread">
            <view class="p-info" :style="{ background: serviceNameBgColor[order.status] }">
              <view class="p-i-name-w">
                <text class="p-i-name">{{ order.insurancePackageName }}</text>
                <text class="p-i-status" :style="{ background: serviceStatusColor[order.status] }">{{
                  order.status | getOrderStatusName
                }}</text>
              </view>
              <view class="p-i-operate">
                <view class="p-detail" @click="checkServiceDetail(order)">查看详情</view>
                <view
                  v-if="order.status === 2 && order.payStatus === 0 && order.amount"
                  class="p-i-btn"
                  @click="payment(order)"
                >
                  支付
                </view>
              </view>
            </view>
            <view class="spread-opr" @click="changeSpreadStatus">
              <view v-if="!canSpread && inserviceOrderList.length > 1" class="opr opr-down">
                <view class="opr-txt">展开全部</view>
                <view class="opr-img-wrap"><image :src="aDownPng" /></view>
              </view>
              <view v-if="canSpread && index === inserviceOrderList.length - 1" class="opr opr-up">
                <view class="opr-txt">收起列表</view>
                <view class="opr-img-wrap"><image :src="aDownPng" /></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      -->
    </view>
  </view>
</template>
<script>
// 服务页接口  获取当前用户的服务订单
import {
  getFamilyData,
  getInserviceInfoByOrderId,
  getArticleDetail,
  getInsureDetail,
  existEstimatedOrder,
  ingoreFirstExistEstimatedOrder,
  getPatientInfo,
  getInsuranceOrder,
  getpayNum,
  getMedicOrderInfo
} from '@/api/service.js';
import { reportAll } from '@/api/assessQuestion';

import { getUserInfoByPatientId, getCanAssistanceApply } from '@/api/join.js';
// 家人关系
import aDownPng from '@/static/icon/a-down.png';
// 引入统计
import { tongji } from '@/utils/tools.js';

// 保障、非保障图片地址
import bzPng from '@/static/icon/bz.png';
import dbPng from '@/static/icon/db.png';
import wbPng from '@/static/icon/wb.png';
import { webBaseUrl, videoDoctor7TrialServiceId, commonProjectType } from '@/common/baseUrl.js';
import { getAds } from '@/api/index.js';

import iconCheckPng from '@/static/icon/icon-check.png';
import iconMoneyPng from '@/static/icon/iconmoney.png';
import healthAssIconPng from '@/static/icon/healthAssIcon.png';
import wzjlPng from '@/static/icon/wzjl.png';
import assHiltoryPng from '@/static/icon/assHiltory.png';
import healthIconPng from '@/static/icon/healthIcon.png';
import sListPng from '@/static/icon/s-list.png';
import aLoadingPng from '@/static/icon/aloading.png';
import bLoadingPng from '@/static/icon/bloading.png';
import { healthServer } from '@/common/isHealthServer.js';

export default {
  components: {
    // popCom
    // agreeScroll
  },
  filters: {
    getOrderStatusName(key) {
      let orderKeyValue = {
        2: '待激活',
        3: '服务中',
        4: '已完成',
        6: '已终止'
      };
      return orderKeyValue[key] || '未知';
    }
  },
  data() {
    return {
      iconCheckPng,
      healthAssIconPng,
      wzjlPng,
      assHiltoryPng,
      healthIconPng,
      sListPng,
      aLoadingPng,
      bLoadingPng,
      iconMoneyPng,
      membersStatus: {
        0: wbPng,
        2: dbPng,
        3: bzPng
      },
      aDownPng,
      hasServices: true, // 默认有服务
      flLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/fl-logo.png',
      addPng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/add.png',
      // adownPng: adownPng,
      patientId: '',
      inserviceOrderList: [], // 用户购买的的服务订单，服务订单下的服务产品中，保险跟其他的产品不同，需要另外通过接口获取tnnd  使用insureOrderList存放保险订单详情
      insureOrderList: [], // 保单列表。 一个服务单下会有一个保险产品，insureOrderList要与inserviceOrderList长度保持一致，这样取值才不会出错。
      familyList: [], // 默认必须有当前登录人
      familyIndex: 0,
      closePng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/close.png',
      currentArticle: {}, // 当前文章
      popArticleTitle: '', // 文档列表弹窗标题
      popArticleList: [], // 弹窗文档列表
      popArticleListIsShow: false, // 是否显示
      articleDetailIsShow: false,

      packageProduct: [], //  用户服务单下的服务产品列表
      receiverAddress: [], // 当前用户收货地址
      regularMedicationInfo: null, // 会员三定信息
      flArticleList: [], // 健管健教 产品文档
      hasEstimatedOrder: false, // 是否存在三定订单
      pkg: {
        user: {
          name: '',
          goods: ''
        },
        info: {
          name: '',
          dc: '',
          ts: '',
          peroidStart: '',
          peroidEnd: ''
        }
      },
      personLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/person.png',
      hasPhysicalExamination: false, // 是否有健康评估报告
      patientInfo: {},
      currentPatientInfo: {},
      currentPatientName: '',
      userInfo: {},
      // 2待激活 3服务中  4已完成 6已终止
      serviceNameBgColor: {
        2: '#F4F4F4',
        3: '#FFF1EF',
        4: '#E7EDFE',
        6: '#F4F4F4'
      },
      serviceStatusColor: {
        2: '#FFBE00',
        3: '#8ED7B1',
        4: '#F25559',
        6: '#F34E1C'
      },
      hasCommitDrugInfo: false, // 是否提交过三定用药信息
      canSpread: false, // 是否可以展开
      familyScrollLeft: 0,
      showHealthAssessmentBtn: false,
      isHealthAssessmentBtnExpire: true,
      showHealthExaminationBtn: false,
      // isHealthExaminationBtnExpire: true,
      showDrugHistoryBtn: false, // 用药记录按钮
      onLoadPatientId: '',
      isPay: 0, // 判断是否支付(根据后端返回数组的长度判断)
      isMark: false, // 是否有未读报告
      welfarePlanList: [],
      pageType: 0, // 类型，0为呼叫视频医生，1视频医生7天免费试用  2为购买24小时视频医生
      isMySelf: true,
      currentPatientHasVideoService: 0, // 当前用户是否有问诊记录
      option: {},
      loading: true,
      healthServer: null,
      power: false
    };
  },
  onLoad(option) {
    this.option = option;
    // 获取页面来源
    let appSource = uni.getStorageSync('appSource');
    let hasVisitVideoDoctor7Trial = uni.getStorageSync('hasVisitVideoDoctor7Trial');

    // 如果是扫码冰箱贴进来的
    if (appSource === 'scanFridgeQr') {
      tongji('4ef6478b-1d33-4fc3-b1e2-9ad5e370dae2');
      // 如果没有打开过7天免费试用服务页,则跳转到该服务的购买页
      if (hasVisitVideoDoctor7Trial !== 1) {
        setTimeout(() => {
          uni.reLaunch({
            // eslint-disable-next-line
            url: 'pagesC/service/detail?id=' + videoDoctor7TrialServiceId
          });
        }, 0);
      } else {
        this.afterOnload(option);
      }
    } else {
      this.afterOnload(option);
      // 从公众号进入
      if (appSource === 'officialAccount') {
        tongji('af909a20-a526-462f-9104-375fa858245f');
      }
    }
    this.getCanAssistanceApplyObj();
  },
  async onShow() {
    let appSource = uni.getStorageSync('appSource');
    let hasVisitVideoDoctor7Trial = uni.getStorageSync('hasVisitVideoDoctor7Trial');
    if (appSource !== 'scanFridgeQr' || hasVisitVideoDoctor7Trial === 1) {
      this.getFamilyList(this.$store.state.join.patientid);
    }
  },
  computed: {
    drugPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 8;
      });
    },
    healthPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 3;
      });
    }
  },
  async mounted() {
    this.healthServer = await healthServer(this.patientId);
    console.log('是否有健管服务', this.healthServer);
  },
  methods: {
    // isFromBxt(){
    //   // 是否是扫码冰箱贴
    //   let appSource = uni.getStorageSync('appSource');
    //   let hasVisitVideoDoctor7Trial = uni.getStorageSync('hasVisitVideoDoctor7Trial');

    // },

    async afterOnload(option) {
      // 获取广告位
      getAds('万户健康小程序-全部服务-底部广告').then((res) => {
        if (res.code === 0) {
          this.welfarePlanList = res.data || [];
          this.welfarePlanList.forEach((item) => {
            item.url = item.url && item.url.replace(/https?:\/\//, '');
            if (item.url && item.url[0] !== '/') {
              item.url = '/' + item.url;
            }
          });
        } else {
          uni.showToast({ title: '全部服务-底部广告失败' });
        }
      });

      // 获取当前用户相关信息
      try {
        this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
      } catch (e) {
        console.log('e:', e);
      }

      // 当前用户id
      let patientId =
        (option && option.patientId) || this.$store.state.join.patientid || wx.getStorageSync('patientId');
      this.patientId = patientId;

      if (option && option.patientId) {
        this.onLoadPatientId = option.patientId;
      }
      // 获取家人关系，始终使用当前登录人的id
      this.getFamilyList(this.$store.state.join.patientid);
      // 获取当前登录人的姓名
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        this.currentPatientInfo = res.data;
        this.currentPatientName = res.data.name;
      });
      // 查询健康风险评估报告总数
      const r = await reportAll({
        patientId: this.patientId,
        hasRead: false
      });
      this.isMark = r.data || 0;
    },
    goIllForm() {
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/illnessForm'
      });
    },
    goAskDoctorHistory() {
      console.log('this.currentPatientHasVideoService:', this.currentPatientHasVideoService);
      uni.navigateTo({
        url:
          '/pages/service/askDoctorHistory?patientId=' +
          this.patientId +
          '&hasVideoService=' +
          this.currentPatientHasVideoService
      });
      tongji('95354a19-9e06-4f40-8ec2-bbbc96382020');
      // this.$wxPromise.navigateTo({
      //   url:
      //     '/pages/service/askDoctorHistory?patientId=' +
      //     this.patientId +
      //     '&hasVideoService=' +
      //     this.currentPatientHasVideoService
      // });
    },
    initData() {
      this.hasServices = true;
      this.inserviceOrderList = []; // 用户购买的的服务订单，服务订单下的服务产品中，保险跟其他的产品不同，需要另外通过接口获取tnnd  使用insureOrderList存放保险订单详情
      this.insureOrderList = []; // 保单列表。 一个服务单下会有一个保险产品，insureOrderList要与inserviceOrderList长度保持一致，这样取值才不会出错。
      this.currentArticle = {}; // 当前文章
      this.popArticleTitle = ''; // 文档列表弹窗标题
      this.popArticleList = []; // 弹窗文档列表
      this.packageProduct = []; //  用户服务单下的服务产品列表
      this.receiverAddress = []; // 当前用户收货地址
      this.regularMedicationInfo = null; // 会员三定信息
      this.flArticleList = []; // 健管健教 产品文档
      this.hasEstimatedOrder = false; // 是否存在三定订单
      this.hasPhysicalExamination = false; // 是否有健康评估报告
      this.patientInfo = {};
      this.currentPatientInfo = {};
      this.showHealthAssessmentBtn = false;
      this.isHealthAssessmentBtnExpire = true;
      this.showDrugHistoryBtn = false;
      this.showHealthExaminationBtn = false;
      // this.isHealthExaminationBtnExpire = true;
      this.currentPatientHasVideoService = 0;
      this.loading = true;
      this.power = false;
    },

    goFamilyMember() {
      tongji('2f83ec94-a519-4a7c-8161-830f34e5d8c2');
      this.jumpPage('/pagesC/familyMember/index');
    },
    getCanAssistanceApplyObj() {
      const patientId = wx.getStorageSync('patientid');
      getCanAssistanceApply(patientId).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.power = false;
        } else {
          this.power = true;
        }
      });
    },

    callVideo() {
      uni.navigateTo({
        url: '/pagesC/videoDoctor/index?patientId=' + this.patientId
      });
      tongji('fe1959e6-5c22-4dac-bd05-ca56190dbf07');
    },
    buyVideoDoctor(type) {
      if (type === 7) {
        uni.navigateTo({
          // eslint-disable-next-line
          url: 'pagesC/service/detail?id=' + videoDoctor7TrialServiceId
        });
        tongji('5a22215c-f00b-481c-8aea-d2dcf72e13f1');
      } else {
        uni.navigateTo({
          // eslint-disable-next-line
          url: 'pagesC/service/index'
        });
        tongji('cbad3de3-ba36-4145-803a-d84f1225adb6');
      }
    },
    checkServiceDetail(order) {
      // 查看详情
      uni.navigateTo({
        url: '/pages/service/detail?orderId=' + order.orderId + '&patientId=' + this.patientId
      });
    },
    changeSpreadStatus() {
      this.canSpread = !this.canSpread;
    },
    initFamilyIndex() {
      let curFamilyIndex = -1;
      if (this.onLoadPatientId) {
        for (let i = 0; i < this.familyList.length; i++) {
          let item = this.familyList[i];
          if (item.insuredId === this.patientId) {
            curFamilyIndex = i;
            break;
          }
        }
      } else {
        curFamilyIndex = 0;
      }

      // 默认一行能显示5个,index是从0开始的。一个家庭成员logo宽96，边距44，合计140
      if (curFamilyIndex >= 4) {
        this.familyScrollLeft = (curFamilyIndex - 4) * 140 + 'rpx';
      }
      this.changePerson(curFamilyIndex);
    },
    showServiceList(title, articleList) {
      this.$store.commit('service/SET_SERVICE_TITLE', title);
      this.$store.commit('service/SET_SERVICE_ARTICLELIST', articleList);
      // 显示服务列表页
      this.$wxPromise.navigateTo({
        url: `/pages/service/agreeList`
      });
    },
    showEstimatedPickupDate(date) {
      // 是否显示三定送达时间
      let now = new Date();
      let localDate = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
      return date && new Date(date.replace(new RegExp(/-|\./gm), '/')) >= new Date(localDate);
    },
    showAllProductsTitle(order) {
      let temp = false;
      if (order) {
        for (let item of order.products) {
          if (item.insuranceProductType === 1 || item.insuranceProductType === 8 || item.insuranceProductType === 3) {
            temp = true;
            break;
          }
        }
      }
      return temp;
    },
    bugMoreService(item, index) {
      if (item.url) {
        let url = item.url;
        this.$wxPromise.navigateTo({
          url: url
        });
      } else {
        uni.navigateTo({
          url: '/pagesC/service/index'
        });
      }
      switch (index) {
        case 0:
          tongji('5751f9b7-0762-46b3-82d4-803a14a8da3c');
          break;
        case 1:
          tongji('d106b92c-8341-4f9e-9c7a-27daf6e85c1e');
          break;
        case 2:
          tongji('045a5680-0269-413f-b2b0-56dccf63ac5e');
          break;
      }
      // 点击推荐服务总数
      tongji('cba9be83-6723-4609-b9c5-10bc65931de7');
    },
    init() {
      // 获取当前用户的服务订单
      this.getInserviceById(this.patientId);
      // 获取是否有三定订单
      this.getEstimatedOrderInfo(this.patientId);
      // 判断是否提交过三定用药信息
      // this.getCommitDrugInfo(this.patientId);
      this.getCanAssistanceApplyObj();
      // 获取会员信息
      getPatientInfo(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取会员信息失败'
          });
        } else {
          this.patientInfo = res.data;
        }
      });

      // 判断三定用药是否支付
      getpayNum(this.patientId).then((res) => {
        this.isPay = res || [];
      });
    },

    gotoReportList() {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage?patientId=' + this.patientId
      });
      this.$store.commit('assessQuestion/SET_ASSESSPATIENTID', this.patientId);
    },
    startHealthyPage() {
      const { relation } = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/healthyRecord/targetHistoryList?patientId=${this.patientId}&relation=${relation}`
      });
      tongji('f3ab8cfe-8362-46c8-8e17-459852731897');
    },
    goServiceList() {
      // 提到服务列表页
      this.$wxPromise.navigateTo({
        url: `/pages/service/serviceList?patientId=${this.patientId}`
      });
      tongji('501075dc-b54c-4977-adba-352c65d2f428');
    },
    useDrugPage() {
      this.$wxPromise.navigateTo({
        url: '/pages/view/web-view?url=' + webBaseUrl + 'evaluationPatient'
      });
    },
    startReport() {
      // 友盟
      tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
      // 跳转到评估报告列表页
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/index?patientId=' + this.patientId
      });
      // uni.reLaunch({
      //   url: '/pagesB/assessSick/index?patientId=' + this.patientId
      // });
    },
    startReportTalk() {
      if (!this.isHealthAssessmentBtnExpire) {
        tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
        // 跳转到评估报告列表页
        const { relation, sex } = this.familyList[this.familyIndex];
        this.$wxPromise.navigateTo({
          url: `/pagesB/cardiovascularAssess/index?patientId=${this.patientId}&relation=${relation}&sex=${sex}`
        });
      }
    },
    apply3d(item) {
      // 申请开通3定
      this.$wxPromise.navigateTo({
        url: '/pages/deliveryService/index?insuredPatientId=' + this.patientId + '&orderId=' + item.insuranceOrderId
      });
    },
    getEstimatedOrderInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
          // 如果返回ture，则接着判断
          if (res.data) {
            existEstimatedOrder(patientId).then((res) => {
              if (res.code !== 0) {
                uni.showModal({
                  title: '提示',
                  content: '获取三定信息失败'
                });
              } else {
                this.hasEstimatedOrder = res.data;
              }
            });
          }
        }
      });
    },
    // 判断是否提交了用药信息 true为提交过用药信息，false为没有提交过用药信息
    getCommitDrugInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
        }
      });
    },
    async checkInsureCertificate(order) {
      // 查看保险凭证
      getInsureDetail(order.orderId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({
            title: '获取保障详情失败'
          });
        }
        this.$wxPromise.navigateTo({
          url: '/pages/view/web-view?url=' + res.data.pdfUrl
        });
      });
    },
    async changePerson(index, origin) {
      // 如果index不为-1.则表示需要切换用户
      if (index !== -1) {
        this.patientId = this.familyList[index].insuredId || this.$store.state.join.patientid;
      }
      this.healthServer = await healthServer(this.patientId);
      this.familyIndex = index;
      this.initData();
      this.init();
      // 修改视频医生
      this.changeVideoDoctorAd();

      const r = await reportAll({
        patientId: this.patientId,
        hasRead: false
      });
      this.isMark = r.data || 0;

      if (origin === 'click') {
        // 点击用户头像
        tongji('de5f1500-c8b6-4652-99d0-726e572c7777');
      }
    },
    async changeVideoDoctorAd() {
      // 修改视频医生服务包显示
      let curPerson = this.familyList[this.familyIndex];
      // 获取和缓医生情况
      // console.log('this.familyList', this.familyList);
      // console.log('this.familyIndex', this.familyIndex);
      // console.log('curPerson.insuredId:', curPerson.insuredId);
      // console.log('curPerson.memberId:', curPerson.memberId);
      let medicOrderInfoResult = await getMedicOrderInfo(curPerson.insuredId || curPerson.memberId);
      // console.log('medicOrderInfoResult:', medicOrderInfoResult);
      if (medicOrderInfoResult.code === 0) {
        let medicOrderInfoData = medicOrderInfoResult.data;
        // 用户从来没购买过视频医生
        if (medicOrderInfoData.orders.length === 0) {
          if (curPerson.relation === 1) {
            // 本人
            // 0为呼叫视频医生，1视频医生7天免费试用  2为购买24小时视频医生
            this.pageType = 1;
          } else {
            this.pageType = 2;
          }
        } else {
          // 购买过视频医生订单//是否过期 0=否 1=是 0表示肯定有服务中的视频医生单子
          if (medicOrderInfoData.expires === 0) {
            // 有服务中的视频订单
            this.pageType = 0;
          } else {
            // 没有服务中的视频订单。
            if (curPerson.relation === 1) {
              // 本人
              // 是否购买过7天免费试用视频医生
              let has7TrialVideoService = medicOrderInfoData.orders.some((item) => {
                return item.medicCardType === 2;
              });
              if (has7TrialVideoService) {
                // 购买过7天免费试用
                this.pageType = 2;
              } else {
                this.pageType = 1;
              }
            } else {
              // 非本人
              this.pageType = 2;
            }
          }
        }
        // console.log('this.pageType:', this.pageType);
      } else {
        // 请求和缓医生接口失败
        console.error('请求和缓医生接口失败');
        this.pageType = 0;
      }

      // // 有无服务中的视频医生订单
      // let hasIngVideoService = medicOrderInfo.or;
      // // 本人
      // if (curPerson.relation === 1) {
      // }
      // // 其他人

      // console.log('curPerson:', curPerson);
    },
    serviceDays(orderDate) {
      let days =
        Math.floor((new Date() - new Date(orderDate.replace(new RegExp(/-|\./gm), '/'))) / (24 * 60 * 60 * 1000)) || 0;
      if (days < 0) {
        days = 0;
      }
      return days;
    },
    helpFamilyJoin() {
      // 友盟
      tongji('204148ba-6874-47d7-9aec-5cee3f24d08d');
      // 帮家人加入
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
          this.$wxPromise.navigateTo({
            url: '/pages/join/form?fromPage=1'
          });
        } else {
          this.$wxPromise.navigateTo({
            url: '/pages/join/authorIdentityChaeck'
          });
        }
      });
    },
    getFamilyList(patientId) {
      getFamilyData(patientId).then((res) => {
        this.loading = true;

        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        const newUserInfo = [
          {
            relation: 1,
            patientId: patientId,
            insuredId: patientId,
            memberId: patientId,
            sex: null,
            status: null
          }
        ];
        let resDataOrigin = res.data.length > 0 ? res.data : newUserInfo;
        // 对家庭组进行排序，本人、父母、配偶、子女
        let familySort = [1, 3, 2, 4];
        let resData = [];
        let resObj = {};
        resDataOrigin.forEach((fData) => {
          let relation = fData.relation;
          if (resObj[relation]) {
            resObj[relation].push(fData);
          } else {
            resObj[relation] = [fData];
          }
        });
        familySort.forEach((fIndex) => {
          if (resObj[fIndex]) {
            resData = resData.concat(resObj[fIndex]);
          }
        });

        resData.forEach((item) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;
          // sex 1男  0为女
          if (item.sex === 1) {
            // 只有父母和子女需要区分性别
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
          // 如果是本人的话，则使用微信头像
          if (item.relation === 1) {
            item.src = this.userInfo.avatarUrl || item.src;
          }
        });

        this.familyList = resData;
        // if (this.familyList.length) {
        //   this.patientId = this.familyList[0].insuredId;
        // } else {
        //   this.patientId = patientId;
        // }
        this.initFamilyIndex();
      });
    },
    /* eslint-disable*/
    getInserviceById(patientId) {
      // 获取用户服务订单
      // 接口  查询被保险人服务单  /insuranceOrder

      getInsuranceOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户服务单失败' });
          return;
        }
        // 用户购买的服务订单
        let tempInserviceOrderList = res.data.filter((oData) => {
          // 只获取type为6的订单
          return oData.projectType === commonProjectType;
        });

        // 对inserviceOrderList 进行排序 按时间先后进行排序
        let temp2inserviceOrderList = tempInserviceOrderList.sort((item1, item2) => {
          return item2.orderDate - item1.orderDate;
        });

        // 判断是否显示健康评估按钮，要求：服务订单状态待非待激活且含有健管健教
        temp2inserviceOrderList.forEach((order) => {
          // 服务中
          if (order.status === 3) {
            order.products.forEach((pro) => {
              // 待激活，已激活
              if (pro.insuranceProductStatus === 10 || pro.insuranceProductStatus === 20) {
                if (pro.insuranceProductType === 8) {
                  // 药品直供类
                  this.showDrugHistoryBtn = true;
                }
              }
              // 有处于服务中的
              if (pro.insuranceProductType === 3) {
                // 健管健教
                this.isHealthAssessmentBtnExpire = false;
              }
              // if(pro.insuranceProductType ===2 ){
              //   // 体检
              //   console.log('order:',order)
              //   this.isHealthExaminationBtnExpire = false;
              // }
            });
          }

          if (order.status !== 2) {
            order.products.forEach((pro) => {
              // 只要包含相关产品则显示对应的功能按钮
              if (pro.insuranceProductType === 3) {
                // 健教健管类
                this.showHealthAssessmentBtn = true;
              } else if (pro.insuranceProductType === 2) {
                // 体检类
                this.showHealthExaminationBtn = true;
              }

              // // 状态 已终止
              // if (order.status === 6) {
              //   this.isHealthAssessmentBtnExpire = true;
              //   this.isHealthExaminationBtnExpire = true;
              // } else {
              //   if (pro.insuranceProductStatus == 99 || pro.insuranceProductStatus == 98) {
              //     // 99已完成，98 已失效
              //     if (pro.insuranceProductType === 3) {
              //       // 健管
              //       this.isHealthAssessmentBtnExpire = true;
              //     } else if (pro.insuranceProductType === 2) {
              //       // 体检
              //       this.isHealthExaminationBtnExpire = true;
              //     }
              //   }
              // }
            });
          }

          // 如果服务单状态为待激活或者已完成，且含有视频医生
          if (order.status === 2 || order.status === 3) {
            order.products.forEach((pro) => {
              // 视频医生
              if (pro.insuranceProductType === 4) {
                this.currentPatientHasVideoService = 1;
              }
            });
          }
        });

        if (temp2inserviceOrderList.length > 0) {
          let sucNum = 0;
          temp2inserviceOrderList.forEach(async (order, oIndex) => {
            let orderId = order.orderId;
            // 获取服务单详情 /patients/insurance_order/
            getInserviceInfoByOrderId(orderId).then(async (res) => {
              if (res.code !== 0) {
                uni.showToast({ title: '获取详情失败' });
                return;
              }
              let inserviceInfo = res.data;

              let pkgArticleList = [];
              // 保险包附件文档列表
              if (inserviceInfo.packageProduct) {
                // 服务产品取的是packageProduct   服务包取的是insurancePackageSpecs
                inserviceInfo.packageProduct.forEach((pro) => {
                  if (pro.productType === 1) {
                    inserviceInfo.npackageName = pro.productName;
                    if (pro.productSpecs) {
                      pro.productSpecs.forEach((spe) => {
                        if (spe.type == 1) {
                          pkgArticleList.push(spe);
                        }
                      });
                    }
                  }
                });
              }
              let inserviceArticleList = [];
              // 获取服务包协议insurancePackageSpecs
              if (inserviceInfo.insurancePackageSpecs) {
                inserviceInfo.insurancePackageSpecs.forEach((item) => {
                  // 会员服务协议
                  if (item.type === 7) {
                    inserviceArticleList.push(item);
                  }
                });
              }

              // 判断是否有保险订单，有保险订单再执行获取等待期和问询的操作
              let hasInsure = order.products.some((item) => {
                return item.insuranceProductType === 1;
              });

              if (hasInsure) {
                // 如果存在保单开始时间，则说明该服务单含有保险，且有保险等待期。如果服务单不含保险，getInsureDetail获取等待期会报错
                let insureResult = await getInsureDetail(orderId);
                if (inserviceInfo.startDate) {
                  // 获取保险包等待期
                  if (insureResult.code !== 0) {
                    // uni.showModal({
                    //   title: '提示',
                    //   content: '获取保障详情失败'
                    // });
                    return;
                  }
                  // 等待期
                  let delayDays = insureResult.data.delayDays || 0;
                  // 保单开始时间，保单结束时间
                  let dayTimes = 24 * 60 * 60 * 1000;
                  let startDate =
                    new Date(inserviceInfo.startDate.replace(new RegExp(/-|\./gm), '/')).getTime() +
                    delayDays * dayTimes;

                  let tempEndDate = new Date(inserviceInfo.endDate.replace(new RegExp(/-|\./gm), '/'));
                  tempEndDate.setFullYear(tempEndDate.getFullYear() + 2);

                  let endDate = tempEndDate.getTime() - Number(dayTimes);
                  let now = new Date();
                  let localDate = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
                  let nowDate = new Date(localDate);
                  let isInProduct = nowDate >= startDate && nowDate <= endDate;
                  // 1已承保 3已完成  5已退保
                  if (
                    inserviceInfo.teamOrderStatus === 1 ||
                    ((inserviceInfo.teamOrderStatus === 3 || inserviceInfo.teamOrderStatus === 5) && isInProduct)
                  ) {
                    // 服务中
                    inserviceInfo.showApplyBtn = true;
                  }
                }
                // 是否有问询
                inserviceInfo.healthEnquiries = insureResult.data.healthEnquiries || [];
              }

              inserviceInfo.pkgArticleList = pkgArticleList;
              inserviceInfo.inserviceArticleList = inserviceArticleList;
              order.inserviceInfo = inserviceInfo;
              // this.insureOrderList.push(inserviceInfo);

              // // 该保单下的所有产品
              // let packageProduct = [];
              // let tempPackageProduct = this.inserviceInfo.packageProduct;
              // // 对服务单产品进行排序,顺序为：9企业会员类、1保险类、8药品直供类、2体检类、4视频医生（和缓）、5特药福利类、7保险直赔类、6线下医生类、3健教健管类
              // let pckOrderBy = [9, 1, 8, 2, 4, 5, 7, 6, 3];
              // for (let i of pckOrderBy) {
              //   tempPackageProduct.forEach((item) => {
              //     if (item.productType === i) {
              //       packageProduct.push(item);
              //     }
              //   });
              // }
              // this.packageProduct = packageProduct;
              sucNum++;
              if (sucNum === temp2inserviceOrderList.length) {
                // 隐藏loading
                // uni.hideLoading();
                this.loading = false;
                this.inserviceOrderList = temp2inserviceOrderList;
              }
            });
          });
        } else {
          // 隐藏loading
          this.hasServices = false; // 没有服务
          // uni.hideLoading();
          this.loading = false;
          this.inserviceOrderList = [];
        }
      });
    },
    showServiceArticleList(item) {
      if (item.inserviceArticleList.length) {
        // 显示服务详情列表
        this.popArticleList = item.inserviceArticleList;

        // this.popArticleListIsShow = true;
        // this.popArticleTitle = '服务条款';
        this.showServiceList('服务条款', this.popArticleList);
      } else {
        uni.showModal({
          title: '提示',
          content: '该服务包暂无服务协议'
        });
      }
    },
    closeServiceArticleList() {
      this.popArticleList = [];
      this.popArticleListIsShow = false;
    },
    showArticleDetail(articleId) {
      // 显示文章
      getArticleDetail(articleId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取文章详情失败' });
          return;
        }
        this.currentArticle = res.data;
        // 显示文章
        this.articleDetailIsShow = true;
        // 隐藏列表
        this.popArticleListIsShow = false;
      });
    },
    // 保险文章列表
    showInsureArticleList(item) {
      // this.popArticleTitle = '保险协议';
      // this.popArticleList = item.pkgArticleList;
      // this.popArticleListIsShow = true;
      this.showServiceList('保险协议', item.pkgArticleList);
    },
    closeArticleDetail() {
      this.articleDetailIsShow = false;
      // 隐藏列表
      this.popArticleListIsShow = true;
    },
    goServiceOrderDetailPage(item) {
      // 跳转至服务单详情页面
      this.$wxPromise.navigateTo({
        url: '/pages/service/introduce?insurancePackageId=' + item.packageId
      });
    },
    // 支付
    payService(item) {
      // 友盟
      tongji('69b73193-68d2-462e-9672-4fc4284877ab');
      if (item.payStatus === 0) {
        uni.showToast({ title: '功能建设中' });
        return;
      }
    },
    checkInsure() {
      uni.showToast('跳保险订单');
    },
    applyInsureMoney(item) {
      // 友盟
      tongji('f9809a46-f71d-434a-839c-8bb100401443');
      // 领取保障金
      this.$wxPromise.navigateTo({
        url: `/pages/getWelfareGold/index?patientId=${item.insured.insuredId}`
      });
    },

    chagneRegularMedicationInfo() {
      // 友盟
      tongji('25298928-b5cb-4cc2-922f-097f0c1a5d02');
      // 修改三定申请
      this.$wxPromise.navigateTo({
        url: '/pages/confirmAppointment/index?insuredPatientId=' + this.patientId
      });
      uni.setStorageSync('insuredPatientId', this.patientId);
    },
    checkRegularMedicationInfo() {
      // 跳转到查看药品记录页面
      this.$wxPromise.navigateTo({
        url: '/pages/drugOrder/index?patientId=' + this.patientId
      });
    },
    changeReplay() {
      uni.showToast({
        title: '修改申请'
      });
    },
    checkFlProductArticle(order) {
      // 查看健管健教类产品文档
      // 获取产品文档
      getInserviceInfoByOrderId(order.orderId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取产品文档失败'
          });
        } else {
          this.popArticleList = [];
          // 一个服务包下有多个产品服务，产品没说取那个，咱也不敢问，问了就被怼，暂时取第一个，提bug了再修复
          let packageProduct = res.data.packageProduct;
          packageProduct.forEach((pro) => {
            // 健管健教类
            if (pro.productType === 3) {
              pro.productSpecs.forEach((spe) => {
                if (spe.type === 5) {
                  this.popArticleList.push(spe);
                }
              });
            }
          });
          if (this.popArticleList.length > 0) {
            // this.popArticleListIsShow = true;
            // this.popArticleTitle = '服务介绍';
            this.showServiceList('服务介绍', this.popArticleList);
          } else {
            uni.showModal({
              title: '提示',
              content: '暂时没有产品文档'
            });
          }
        }
      });
    },

    // 支付按钮
    async payment(order) {
      this.$wxPromise.navigateTo({
        url: '/pagesC/pay/index?orderId=' + order.orderId
      });
    },
    healthReport() {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage?patientId=' + this.patientId
      });
      tongji('efdd0e9b-ddf4-4eef-b8b2-d59f60874a05');
    },

    // 跳转体检服务
    physicalExamination() {
      // if (!this.isHealthExaminationBtnExpire) {
      //   this.$wxPromise.navigateTo({
      //     url: '/pagesC/physicalExamination/list?patientId=' + this.patientId
      //   });
      // }
      this.$wxPromise.navigateTo({
        url: '/pagesC/physicalExamination/list?patientId=' + this.patientId
      });
      tongji('694d5a4c-a542-480a-9dd2-4184c096e448');
    },
    jumpPage(page) {
      this.$wxPromise.navigateTo({
        url: page
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@keyframes headRotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.main {
  margin-top: -5rpx;
  margin-left: -5rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  .loading {
    width: 102%;
    height: 102%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;

    img {
      width: 40rpx;
      height: 40rpx;
      animation: headRotate 20s linear infinite;
    }
  }
  .family {
    position: relative;
    padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
    .family-bg-red {
      overflow-x: scroll;
      background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 180rpx;
    }
    .family-content {
      width: 700rpx;
      background: #fff;
      border-radius: 24rpx;
      padding: 32rpx 24rpx 0rpx;
      margin: auto;
      z-index: 100;
      position: relative;
      box-sizing: border-box;
    }
    .f-inner {
      display: flex;
      align-items: center;
      width: max-content;
      padding-right: 80rpx;
      width: 100%;
      height: 130rpx;
      .f-item {
        width: 96rpx;
        height: 130rpx;
        margin-right: 44rpx;
        position: relative;
        .f-logo {
          width: 96rpx;
          height: 96rpx;
          background: white;
          border-radius: 96rpx;
          padding: 8rpx;
          box-sizing: border-box;
          overflow: visible;
          position: relative;
          // &.f-logo0 {
          //   background: none;
          //   border-radius: 16rpx;
          //   padding: 0;
          // }
          &.f-b-imgw-boy {
            background: #e9f8ff;
          }
          &.f-b-imgw-girl {
            background: #ffefef;
          }
          .f-logo-img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
          .f-logo-img-icon {
            position: absolute;
            width: 80rpx;
            height: 32rpx;
            left: 50%;
            transform: translateX(-50%);
            bottom: -16rpx;
          }
        }
        .f-name {
          width: 100%;
          text-align: center;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.6);
          &.active {
            color: white;
          }
        }
        .f-san {
          position: absolute;
          left: 50%;
          width: 0rpx;
          height: 0rpx;
          width: 24rpx;
          height: 24rpx;
          outline: 1px solid #e8e8e8;
          transform: rotate(45deg) translateX(-50%);
          background: white;
          bottom: -26rpx;

          // position: absolute;
          // width: 0rpx;
          // height: 0rpx;
          // left: 50%;
          // transform: translateX(-50%);
          // border-bottom: 12rpx solid #e8e8e8;
          // border-left: 12rpx solid transparent;
          // border-right: 12rpx solid transparent;
          // bottom: 4rpx;
          // overflow: visible;
          // &::before {
          //   position: absolute;
          //   content: '';
          //   width: 8rpx;
          //   height: 8rpx;
          //   top: 12rpx;
          //   left: -8rpx;
          //   background: white;
          // }
          // &::after {
          //   position: absolute;
          //   top: 4rpx;
          //   left: -8rpx;
          //   content: '';
          //   border-bottom: 8rpx solid white;
          //   border-left: 8rpx solid transparent;
          //   border-right: 8rpx solid transparent;
          //   bottom: -2rpx;
          // }
        }
        .f-w-line {
          position: absolute;
          width: 8rpx;
          height: 10rpx;
          left: 50%;
          transform: translateX(-50%);
          background: white;
          bottom: -7rpx;
        }
      }
      .f-add {
        width: 96rpx;
        height: 130rpx;
        margin-right: 40rpx;
        .f-a-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          text-align: center;
          width: 96rpx;
          height: 96rpx;
          line-height: 96rpx;
          color: white;
          font-size: 72rpx;
          position: relative;
          border-radius: 96rpx;
          image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64rpx;
            height: 64rpx;
            transform: translate(-50%, -50%);
          }
        }
        .f-name {
          text-align: center;
          width: 100%;
          margin-top: 20rpx;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .p-user {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin: auto;
      display: flex;
      align-items: center;
      border-top: 1px solid #e8e8e8;
      margin-top: -2rpx;
      .p-u-logo {
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .p-u-name {
        margin-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.55);
      }
      .p-u-line {
        margin: 0px 24rpx;
        border-left: 1rpx solid #e8e8e8;
        width: 0;
        height: 32rpx;
        line-height: 32rpx;
      }

      .p-u-goods {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.55);
      }
    }
  }
  // 服务包样式
  .order-wrap {
    margin-top: 24rpx;
    .order {
      width: 700rpx;
      border-radius: 24rpx;
      background: white;
      box-sizing: border-box;
      margin: auto;
    }

    .pkg-tip-wrap {
      width: 100%;
      background: white;
      border-radius: 24rpx;
      padding: 36rpx 0rpx;
      margin-top: 20rpx;
      .pkg-tip {
        width: 100%;
        height: 300rpx;
        font-size: 36rpx;
        color: #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
      }
    }
    .order-list-wrap {
      margin-top: 20rpx;
      padding: 36rpx 0rpx;
      background: white;
      padding-top: 26rpx;
      border-radius: 24rpx;
    }
  }

  .pkg {
    margin: auto;
    position: relative;
    padding: 0rpx 0rpx 55rpx;
  }
  .p-info {
    width: 700rpx;
    background: #fff1ef;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    border-top: 1rpx solid #e8e8e8;
    border-left: 1rpx solid #e8e8e8;
    border-right: 1rpx solid #e8e8e8;
    border-bottom: 1rpx solid #e8e8e8;
    margin: auto;
    .p-i-name-w {
      width: 100%;
      .p-i-name {
        font-size: 40rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .p-i-status {
        margin-left: 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        color: white;
        height: 32rpx;
        line-height: 32rpx;
        word-break: keep-all;
      }
    }
    .p-i-operate {
      width: 100%;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      .p-detail {
        font-size: 26rpx;
        font-weight: 400;
        color: #2680eb;
        margin-top: 10rpx;
      }
      .p-i-btn {
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }

    .p-i-art {
      margin-top: 20rpx;
      .p-i-a-item {
        display: inline-block;
        font-size: 24rpx;
        color: #2680eb;
        opacity: 1;
        margin-right: 36rpx;
      }
    }
  }
  .p-prod {
    width: 700rpx;
    margin: auto;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    opacity: 1;
    border-radius: 0px 0px 16rpx 16rpx;
    box-sizing: border-box;
    margin-top: -2px;
  }
  .order-checkpro-btn {
    margin-top: 48rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .order-line {
    display: none;
    position: relative;
    height: 0rpx;
    border-top: 1rpx solid #e8e8e8;
    margin: auto;
    z-index: 1;
    height: 48rpx;
    margin-top: 48rpx;
    .o-l-left {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      background: $uni-bg-color;
      position: absolute;
      left: -20rpx;
      top: 24rpx;
      top: -24rpx;
    }
    .o-line {
    }
    .o-l-right {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      right: -20rpx;
      top: 24rpx;
      background: $uni-bg-color;
      position: absolute;
      top: -24rpx;
    }
  }
  .order-arrow {
    width: 48rpx;
    height: 48rpx;
    margin: auto;
    margin-bottom: 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .g-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
    margin: auto;
    width: 700rpx;
    padding: 48rpx 24rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
  }
  .goods {
    position: relative;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .g-info {
      .g-i-name {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
        .g-i-name-statusName {
          background: #f25559;
          margin-left: 5rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 10rpx;
          color: white;
          height: 32rpx;
          line-height: 32rpx;
          word-break: keep-all;
        }
      }
      .g-i-com {
        width: 248rpx;
        margin-top: 24rpx;
        height: 40rpx;
        border: 1px solid #f34e1c;
        border-radius: 8rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #f34e1c;
      }
      .g-i-peroid {
        display: flex;
        margin-top: 32rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        .g-i-p-start {
        }
        .g-i-p-start {
        }
      }
      .g-i-art {
        display: flex;
        margin-top: 40rpx;
        .g-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
    }
    .g-apply {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      right: 24rpx;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 32rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 56rpx;
      color: #f34e1c;
    }
  }
  .medicine {
    margin: auto;
    box-sizing: border-box;
    border-radius: 16rpx;
    position: relative;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .m-left {
      // width: 400rpx;
      .m-title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
      }
      .m-hz {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        display: flex;
      }
      .m-i-art {
        margin-top: 40rpx;
        .m-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
          display: inline-block;
        }
      }
    }
    .m-right {
      position: absolute;
      width: 160rpx;
      height: 56rpx;
      right: 24rpx;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
    .fl-btn {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 0rpx;
      right: 24rpx;
      align-self: flex-end;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
  }

  .fl-list {
    box-sizing: border-box;
    margin: auto;
    border-radius: 16rpx;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .fl-item {
      width: 100%;
      height: 56rpx;
      align-items: center;
      position: relative;
      .fl-logo {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .fl-con {
      }
      .fl-des {
        text-align: left;

        .fl-name {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.9);
          width: 460rpx;
        }
        .fl-info {
          font-size: 24rpx;
          color: rgba(12, 6, 6, 0.3);
          margin-top: 16rpx;
        }
      }
      .fl-i-art {
        display: flex;
        margin-top: 16rpx;
        .fl-i-a-item {
          display: inline-block;
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
      .fl-btn {
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        bottom: 0rpx;
        right: 0rpx;
        align-self: flex-end;
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }
  }
  .his {
    margin-top: 44rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    padding-bottom: 44rpx;
  }
  .serviceArticleList {
    // 显示服务详情列表
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    .s-inner {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 10;
      width: 700rpx;
      height: 90%;
      padding: 0rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      .s-header {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;
        .s-title {
          font-size: 36rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .s-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 40rpx;
        }
      }
      .s-cont {
        .s-c-item {
          height: 60rpx;
          line-height: 60rpx;
          color: #2680eb;
        }
      }
    }
  }
}
.orderTitle {
  color: rgba(0, 0, 0, 0.6);
  font-size: 32rpx;
  position: relative;
  padding-left: 20rpx;
  width: 700rpx;
  margin: auto;
  margin-bottom: 20rpx;
}
.orderTitle::before {
  position: absolute;
  left: 0;
  top: 8rpx;
  content: '';
  width: 6rpx;
  height: 32rpx;
  border-left: 6rpx solid rgba(243, 78, 28, 1);
}
.h-inner {
  height: 260rpx;
}
.service-banner {
  width: 100%;
  height: 260rpx;
  margin: auto;
  margin-bottom: 30rpx;
  // &.service-banner-call {
  //   height: 200rpx;
  //   margin: auto;
  //   padding-top: 44rpx;
  // }
  img {
    width: 100%;
    height: 100%;
  }
}

.service-ad {
  width: 700rpx;
  margin: auto;
  border-radius: 12px;
  background-color: #fff;
  padding: 40rpx 20rpx 48rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
  .s-ad-title {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .s-ad-img {
    margin: auto;
    margin-top: 24rpx;
    width: 654rpx;
    height: 296rpx;
    .plan-img {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
.healthPannel {
  .radiosListWrap {
    min-height: 210rpx;
    position: relative;
    .radio-loading {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      background: white;
      z-index: 1000;
      img {
        width: 60rpx;
        height: 60rpx;
        animation: headRotate 2s linear infinite;
      }
    }
    .radiosList {
      display: inline-block;
      width: 25%;
      height: auto;
      margin-top: 30rpx;
      .icon {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        // background-color: rgba(233, 248, 255, 1);
        border-radius: 100%;
        margin: auto;
        &.icon-expire {
          overflow: hidden;
        }
        &.icon-red {
          background-color: #ffefef;
        }
        img {
          width: inherit;
          height: inherit;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .expire-txt {
          display: inline-block;
          width: 100%;
          height: 40rpx;
          text-align: center;
          background: rgba(0, 0, 0, 0.4);
          line-height: 40rpx;
          color: #e8e8e8;
          font-size: 24rpx;
          position: absolute;
          bottom: 0;
        }
      }
      .mark {
        width: 24rpx;
        height: 24rpx;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        right: 8rpx;
        z-index: 100;
      }
      .name {
        color: rgba(0, 0, 0, 0.9);
        font-size: 28rpx;
        text-align: center;
        margin-top: 24rpx;
        &.name-expire {
          color: #999;
        }
      }
    }

    .bgOrigin {
      .icon {
        background-color: #ffefef;
      }
    }
  }
}
.spread-opr {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.55);
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  height: 40rpx;

  .opr {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .opr-down {
    .opr-img-wrap {
      margin-top: -10rpx;
    }
  }
  .opr-txt {
    display: inline-block;
  }
  .opr-img-wrap {
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .opr-up {
    image {
      transform: rotate(180deg);
    }
  }
}
</style>
